@charset "utf-8";

$darkyellow: #E9DC51;
$darkgrey: lightgrey;

#app{
	background-color: cornsilk;
	padding: 15px;
	position: relative;

	.mb-12{
		margin-bottom: 12px;
	}
	.game_level{
		box-sizing: border-box;
		color: white;
		font-size: 38px;
		padding: 0 10px;
		font-weight: 600;
		letter-spacing: 5px;
		text-align: center;
		border: 1px solid $darkyellow;
		border-radius: 5px;
		
		p{
			line-height: 100px;
			
			span{
				color: #00CC99;
			}
		}
	}
	.game_rule{
		box-sizing: border-box;
		color: white;
		padding: 0 10px;
		border: 1px solid $darkgrey;
		border-radius: 5px;
		
		small{
			font-size: 10px;
		}
		p{
			font-size: 20px;
			margin-top: 8px;
			letter-spacing: 5px;
			//文本换行
			word-wrap: break-word; 
		}
	}
	.small{
		width: 45%;
		height: 100px;
	}
	.darkyellow{ background-color: $darkyellow;}
	.darkgrey{background-color: $darkgrey;}
	
	.game_play{
		margin: 0 -10px ;
		padding: 5px 0 15px;
		
		.row{
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			padding: 0 10px;
			
			.square{
				width: 23%;
				height: 80px;
				color: white;
				font-size: 40px;
				text-align: center;
				line-height: 80px;
				background-color: #0088C3;
			}
			.clock{
				flex: 1;
				height: 80px;
				color: #00CC99;
				font-size: 90px;
				text-align: center;
				box-sizing: border-box;
				line-height: 70px;
			}
			.active{ 
				box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
				background-color: aliceblue;
			}
		}
	}

	#gameStart{
		display: block;
		position: absolute;
		width: 100%;
		margin: -15px;
		top: 0;
		bottom: 0;
		background-color: skyblue;

		h1{
			font-size: 50px;
			position: absolute;
			top: 35%;
			left: calc(100% / 2 - 88px);
			color: aliceblue;
		}
		button{
			padding: 15px;
			background-color: white;
			color: skyblue;
			font-size: 30px;
			border: 1px solid skyblue;
			border-radius: 5px;
			position: absolute;
			top: calc(100% / 2 - 20px);
			left: calc(100% / 2 - 64px);

			&:active{
				box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
				background-color: #3f51b5;
				color: white;
			}
		}
	}
	
	#gameEnd{
		display: none;
		position: absolute;
		width: 100%;
		margin: -15px;
		top: 0;
		bottom: 0;
		background-color: #f1f5f7;

		h1{
			font-size: 50px;
			position: absolute;
			top: 35%;
			left: calc(100% / 2 - 88px);
			color: #9E9E9E;
		}
		button{
			padding: 15px;
			background-color: #ffec42;
			color: #e85223;
			font-size: 30px;
			border: 1px solid #ffec42;
			border-radius: 5px;
			position: absolute;
			top: calc(100% / 2 - 20px);
			left: calc(100% / 2 - 64px);

			&:active{
				box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
				background-color: #3f51b5;
				color: white;
			}
		}
	}

	#gameStart.active,#gameEnd.active{
		display: block;
	}
	#gameStart.hidden,#gameEnd.hidden{
		display: none;
	}
}